<template>
	<view class="big">
		<view class="box">
			<view class="bt">
				<h3>泉州风光</h3>
			</view>
			<view style="padding: 30rpx;">
				<swiper circular indicator-dots="true" :autoplay="true" :interval="5000" :duration="500">
					<swiper-item style="background-color: #808080;">
						<image src="/static/city1.png" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item style="background-color: #808080;">
						<image src="/static/city2.png" style="width: 100%;"></image>
					</swiper-item>
					<swiper-item style="background-color: #808080;">
						<image src="/static/city3.png" style="width: 100%;"></image>
					</swiper-item>
				</swiper>
			</view>
		</view>
		<view class="box">
			<view class="bt">
				<h3>泉州介绍</h3>
			</view>
			<rich-text class="rich-text-container" :nodes="richTextNodes"></rich-text>
		</view>
		<view class="box">
			<view class="bt">
				<h3>探索进度</h3>
			</view>
			<view class="progress-text">当前进度</view>
			<view class="smart-padding-wrap">
				<view class="progress-box">
					<progress :percent="pgList[0]" show-info stroke-width="6" active="true"
						activeColor="#007aff"></progress>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="bt">
				<h3>选择城市</h3>
			</view>
			<view class="city-select">
				<!-- 显示当前选择 -->
				<view class="current-city" @click="showPicker = true">
					当前选择：{{ selectedProvince }} - {{ selectedCity }} - {{ selectedDistrict }}
				</view>

				<!-- 选择器弹窗 -->
				<view v-if="showPicker" class="picker-mask" @click="showPicker = false"></view>
				<view v-if="showPicker" class="picker-box">
					<!-- 选择器标题栏 -->
					<view class="picker-title">
						<text @click="showPicker = false">取消</text>
						<text>选择城市</text>
						<text @click="confirm">确认</text>
					</view>
					<!-- 三级选择器 -->
					<picker-view :value="value" @change="onChange" style="width: 100%; height: 300px;">
						<picker-view-column>
							<view v-for="p in provinces" :key="p.id">{{ p.name }}</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="c in cities" :key="c.id">{{ c.name }}</view>
						</picker-view-column>
						<picker-view-column>
							<view v-for="d in districts" :key="d.id">{{ d.name }}</view>
						</picker-view-column>
					</picker-view>
				</view>
			</view>
		</view>
		<view class="box">
			<view class="bt">
				<h3>泉州宣传</h3>
			</view>
			<video class="video" src="/static/city-video.mp4" controls></video>
			<view class="box">
				<view class="bt">泉州背景音乐</view>
				<view class="audio-box">
				        <button class="play-btn" @click="playAudio">播放</button>
				        <view class="audio-desc">泉州南音 - 泉州传统乐园</view>
				        <slider class="audio-slider" value="50" disabled />
				      </view>
			</view>
		</view>
		<view class="box">
			<view class="bt"><h3>偏好设置</h3></view>
			<view class="preference-item">
			        <view class="preference-label">出行方式:</view>
			        <radio-group class="radio-group" @change="onRadioChange">
			          <label class="radio-label">
			            <radio value="bus" checked />公交
			          </label>
			          <label class="radio-label">
			            <radio value="drive" />自驾
			          </label>
			          <label class="radio-label">
			            <radio value="walk" />步行
			          </label>
			        </radio-group>
			      </view>
			      <view class="preference-item">
			        <view class="preference-label">显示推荐景点:</view>
			        <switch class="preference-switch" checked />
			      </view>
			      <view class="preference-item">
			        <view class="preference-label">探索半径:</view>
			        <slider class="preference-slider" :value="radius" @change="onSliderChange" />
			        <view class="radius-text">{{ radius }}km</view>
			      </view>
		</view>
	</view>
</template>

<script>
	const provinces = [{
			id: 1,
			name: '福建省',
			cities: [{
					id: 11,
					name: '泉州市',
					districts: ['丰泽区', '鲤城区', '洛江区']
				},
				{
					id: 12,
					name: '厦门市',
					districts: ['思明区', '湖里区']
				}
			]
		},
		{
			id: 2,
			name: '广东省',
			cities: [{
					id: 21,
					name: '广州市',
					districts: ['越秀区', '天河区']
				},
				{
					id: 22,
					name: '深圳市',
					districts: ['福田区', '南山区']
				}
			]
		}
	];
	export default {
		data() {
			return {
				radius: 10,
				richTextNodes: [{
						name: 'div',
						attrs: {
							class: 'richtext-strong'
						},
						children: [{
							type: 'text',
							text: '海上丝绸之路起点 - 泉州'
						}]
					},
					{
						name: 'div',
						attrs: {
							class: 'richtext-p'
						},
						children: [{
							type: 'text',
							text: '历史文化：泉州是国务院首批公布的24个历史文化名城之一，是古代“海上丝绸之路”起点，宋元时期被誉为“东方第一大港”。'
						}]
					},
					{
						name: 'div',
						attrs: {
							class: 'richtext-p'
						},
						children: [{
							type: 'text',
							text: '著名景点：清源山、开元寺、泉州清净寺、崇武古城、洛阳桥等。'
						}]
					},
					{
						name: 'div',
						attrs: {
							class: 'richtext-p'
						},
						children: [{
							type: 'text',
							text: '特色文化：拥有南音、木偶戏和闽南建筑等丰富的非物质文化遗产。'
						}]
					}
				],
				pgList: [0, 0],
				provinces: provinces,
				cities: provinces[0].cities, // 默认福建省的市
				districts: provinces[0].cities[0].districts, // 默认泉州市的区

				value: [0, 0, 0], // 选择器索引
				showPicker: false, // 是否显示选择器

				// 选中值
				selectedProvince: '福建省',
				selectedCity: '泉州市',
				selectedDistrict: '丰泽区'
			};
		},
		methods: {
			setProgress() {
				this.pgList = [20, 100];
			},
			onChange(e) {
				const [pIndex, cIndex, dIndex] = e.detail.value;
				this.value = e.detail.value;

				// 更新城市列表
				if (this.provinces[pIndex]) {
					this.cities = this.provinces[pIndex].cities;
					// 更新区县列表
					if (this.cities[cIndex]) {
						this.districts = this.cities[cIndex].districts;
					}
				}
			},
			// 确认选择
			confirm() {
				const [pIndex, cIndex, dIndex] = this.value;
				this.selectedProvince = this.provinces[pIndex].name;
				this.selectedCity = this.cities[cIndex].name;
				this.selectedDistrict = this.districts[dIndex];
				this.showPicker = false;
			},
			playAudio() {
			      // 实际项目中可调用uni.createInnerAudioContext()播放音频
			      uni.showToast({
			        title: '播放音乐',
			        icon: 'none'
			      });
			    },
			    onRadioChange(e) {
			      console.log('选择的出行方式:', e.detail.value);
			    },
			    onSliderChange(e) {
			      this.radius = e.detail.value;
			    }
		}
	}
</script>

<style>
	.big {
		width: 100%;
		height: 100%;
		background-color: #dadada;
		justify-content: center;
		display: flex;
		flex-direction: column;
	}

	.box {
		margin: 10px;
		border-radius: 8px;
		overflow: hidden;
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
		background-color: #f9f9f9;
	}

	.bt {
		font-size: 16px;
		font-weight: bold;
		padding: 10px;
		padding-bottom: 0px;
		background-color: #f9f9f9;
	}

	.rich-text-container {
		padding: 10px 15px;
		font-size: 14px;
		line-height: 1.6;
	}

	.richtext-strong {
		font-weight: bold;
		font-size: 15px;
		display: block;
		margin-left: 10px;
	}

	.richtext-p {
		margin-bottom: 6px;
		color: #333;
		padding: px;
		margin: 10px;
	}

	.progress-box {
		height: 50rpx;
		margin-bottom: 60rpx;
	}

	.progress-text {
		align-self: flex-end;
		font-size: 14px;
		color: #666;
		margin: 10px;
	}

	.city-select {
		padding: 15px;
	}

	.current-city {
		padding: 12px;
		background-color: #f5f5f5;
		border-radius: 6px;
		font-size: 14px;
		color: #333;
	}

	.picker-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.3);
		z-index: 99;
	}

	.picker-box {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		z-index: 100;
	}

	.picker-title {
		display: flex;
		justify-content: space-between;
		padding: 12px 15px;
		border-bottom: 1px solid #eee;
	}

	.picker-title text {
		font-size: 16px;
	}

	.video {
		width: 91%;
		height: 180px;
		margin: 15px;
	}
	.audio-box {
	  padding: 15px;
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	}
	.play-btn {
	  background-color: #4285f4;
	  color: #fff;
	  border-radius: 6px;
	  margin-bottom: 8px;
	}
	
	.audio-desc {
	  font-size: 14px;
	  color: #666;
	  margin-bottom: 8px;
	}
	
	.audio-slider {
	  width: 100%;
	}
	.preference-item {
	  padding: 10px 15px;
	  display: flex;
	  align-items: center;
	  border-bottom: 1px solid #f5f5f5;
	}
	
	.preference-item:last-child {
	  border-bottom: none;
	}
	
	.preference-label {
	  width: 100px;
	  font-size: 14px;
	  color: #333;
	}
	
	.radio-group {
	  display: flex;
	}
	
	.radio-label {
	  margin-right: 20px;
	  font-size: 14px;
	  display: flex;
	  align-items: center;
	}
	.radio-group {
	  display: flex;
	}
	
	.radio-label {
	  margin-right: 20px;
	  font-size: 14px;
	  display: flex;
	  align-items: center;
	}
	
	.preference-switch {
	  margin-left: auto;
	}
	
	.preference-slider {
	  flex: 1;
	  margin: 0 10px;
	}
	
	.radius-text {
	  width: 50px;
	  text-align: center;
	  font-size: 14px;
	  color: #666;
	}
</style>